import { defineComponent, ref, onMounted } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { MapChart, ScatterChart, EffectScatterChart, LinesChart } from "echarts/charts";
import {
  VisualMapComponent,
  TooltipComponent,
  GeoComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import * as echarts from "echarts";
import mapJson from "../../../assets/map.json";
import "./TacticalMap.css";

// 注册必需的组件
use([
  MapChart,
  ScatterChart,
  EffectScatterChart,
  LinesChart,
  VisualMapComponent,
  TooltipComponent,
  GeoComponent,
  LegendComponent,
  CanvasRenderer,
]);

export default defineComponent({
  name: "TacticalMap",
  components: {
    VChart,
  },
  setup() {
    const mapLoaded = ref(false);

    // 我方基地坐标
    const friendlyBases = [
      { name: "北方战区", coord: [116.4, 39.9], value: 5, type: "我方" },
      { name: "东部战区", coord: [121.5, 31.2], value: 5, type: "我方" },
      { name: "南部战区", coord: [113.3, 23.1], value: 5, type: "我方" },
      { name: "西部战区", coord: [104.1, 30.7], value: 5, type: "我方" },
      { name: "中部战区", coord: [114.3, 30.6], value: 5, type: "我方" },
    ];

    // 目标区域
    const targets = [
      { name: "目标A", coord: [110.3, 35.5], value: 3, type: "目标", status: "监控中" },
      { name: "目标B", coord: [118.8, 32.0], value: 3, type: "目标", status: "监控中" },
      { name: "目标C", coord: [106.5, 29.5], value: 3, type: "目标", status: "追踪中" },
      { name: "目标D", coord: [120.2, 36.1], value: 3, type: "目标", status: "监控中" },
    ];

    // 作战路线
    const routes = [
      { coords: [[116.4, 39.9], [110.3, 35.5]], from: "北方战区", to: "目标A" },
      { coords: [[121.5, 31.2], [118.8, 32.0]], from: "东部战区", to: "目标B" },
      { coords: [[104.1, 30.7], [106.5, 29.5]], from: "西部战区", to: "目标C" },
    ];

    const chartOption = ref({
      tooltip: {
        trigger: "item",
        formatter: (params: any) => {
          if (params.componentSubType === "effectScatter") {
            return `
              <div style="padding: 10px;">
                <div style="font-weight: bold; margin-bottom: 5px;">${params.data.name}</div>
                <div style="color: #00d4ff;">类型: ${params.data.type}</div>
                ${params.data.status ? `<div style="color: #ffd700;">状态: ${params.data.status}</div>` : ''}
              </div>
            `;
          }
          return params.name;
        },
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        data: ["我方基地", "目标区域", "作战路线"],
        left: "right",
        top: "10px",
        textStyle: {
          color: "#fff",
        },
        itemWidth: 20,
        itemHeight: 12,
      },
      geo: {
        map: "china",
        roam: true,
        zoom: 1.1,
        center: [105, 36],
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: "#0a2647",
          borderColor: "#00d4ff",
          borderWidth: 1,
          shadowColor: "rgba(0, 212, 255, 0.3)",
          shadowBlur: 10,
        },
        emphasis: {
          itemStyle: {
            areaColor: "#1a3a6f",
            borderColor: "#00d4ff",
            borderWidth: 2,
          },
          label: {
            show: false,
          },
        },
      },
      series: [
        // 我方基地
        {
          name: "我方基地",
          type: "effectScatter",
          coordinateSystem: "geo",
          data: friendlyBases,
          symbolSize: 20,
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
            scale: 4,
            period: 3,
          },
          label: {
            show: true,
            formatter: "{b}",
            position: "top",
            color: "#00ff88",
            fontSize: 11,
            fontWeight: "bold",
          },
          itemStyle: {
            color: "#00ff88",
            shadowBlur: 15,
            shadowColor: "rgba(0, 255, 136, 0.8)",
          },
          zlevel: 2,
        },
        // 目标区域
        {
          name: "目标区域",
          type: "effectScatter",
          coordinateSystem: "geo",
          data: targets,
          symbolSize: 18,
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
            scale: 3.5,
            period: 4,
          },
          label: {
            show: true,
            formatter: "{b}",
            position: "bottom",
            color: "#ff4444",
            fontSize: 11,
            fontWeight: "bold",
          },
          itemStyle: {
            color: "#ff4444",
            shadowBlur: 15,
            shadowColor: "rgba(255, 68, 68, 0.8)",
          },
          zlevel: 2,
        },
        // 作战路线
        {
          name: "作战路线",
          type: "lines",
          coordinateSystem: "geo",
          data: routes,
          lineStyle: {
            color: "#ffd700",
            width: 2,
            opacity: 0.6,
            curveness: 0.2,
          },
          effect: {
            show: true,
            period: 6,
            trailLength: 0.3,
            color: "#ffd700",
            symbolSize: 6,
          },
          zlevel: 1,
        },
      ],
    });

    onMounted(async () => {
      try {
        echarts.registerMap("china", mapJson);
        mapLoaded.value = true;
        console.log("战术地图加载成功");
      } catch (error) {
        console.error("战术地图加载失败:", error);
        mapLoaded.value = true;
      }
    });

    return () => (
      <div class="tactical-map">
        <div class="tactical-map__header">
          <h3 class="tactical-map__title">战场态势感知</h3>
        </div>
        <div class="tactical-map__chart">
          {mapLoaded.value ? (
            <VChart
              option={chartOption.value}
              autoresize
              style="height: 100%; width: 100%;"
            />
          ) : (
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #00d4ff;">
              加载战术地图中...
            </div>
          )}
        </div>
      </div>
    );
  },
});
